<template>
  <div class="player" v-if="showPlayer">
    <audio :src="audio.songUrl" autoplay id="audioPlay" @canplay="startPlay()" @timeupdate="keepTime()" @ended="nextSong()"></audio>
    <section class="ft-player" style="display: block;">
      <div class="ft-go-info" @click="showPanelPlayer">
        <div class="ft-left">
          <img :src="audio.imgUrl" />
        </div>
        <div class="ft-center">
          <p class="ft-desc">{{audio.title}}</p>
          <p class="ft-sub-desc">{{audio.singer}}</p>
        </div>
      </div>
      <div class="ft-right">
        <i class="btn-play" :class="{'btn-pause':isPlay}" @click="togglePlay()"></i>
        <i class="btn-next" @click="nextSong()"></i>
        <i class="ft-icon-download"></i>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'home_player',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    ...mapGetters(['showPlayer', 'audio', 'isPlay', 'songList', 'songIndex'])
  },
  methods: {
    togglePlay() {
      if (this.isPlay) {
        document.getElementById('audioPlay').pause();
      } else {
        document.getElementById('audioPlay').play();
      }
      this.$store.commit('isPlay', !this.isPlay);
    },
    startPlay() {
      this.$store.commit('isPlay', true);
    },
    keepTime() {
      var time = document.getElementById('audioPlay').currentTime;
      if (this.audio.currentFlag) {
        document.getElementById('audioPlay').currentTime = this.audio.currentLength;

        this.$store.commit('setCurrent', false);
      } else {
        this.$store.commit('setAudioTime', time);
      }


    },
    nextSong() {
      let index = this.songIndex;
      if (index == this.songList.length - 1) {
        state.listInfo.songIndex = 0
      } else {
        ++index;
      }
      this.$store.commit('isPlay', true);
      this.$store.commit('setSongIndex', index);
      this.$store.dispatch('changeSong');
    },
    showPanelPlayer() {
      if (this.showPlayer) {
        this.$store.commit('showPanelPlayer', true);
      }
    }
  }
}
</script>

<style lang="stylus"  scoped>
  // 底部
  .ft-player
    width: 100%;
    height: 4.2143rem;
    position: fixed;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.9);
    color: #fff;
    font-size: 0;
    display: none;
    .ft-go-info
      width: 65%;
      height: 100%;
      display: block;
      .ft-left
        width: 3.75rem;
        height: 3.75rem;
        margin: .2143rem .535rem .2143rem .2143rem;
        display: inline-block;
        vertical-align: middle;
      .ft-center
        width: 65%;
        display: inline-block;
        vertical-align: middle;
        .ft-desc
          width: 100%;
          line-height: 1.7;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: .8571rem;
          color: #fff;
        .ft-sub-desc
          line-height: 1.3;
          font-size: .7143rem;
          color: #888;
    .ft-right
      position: absolute;
      top: 1.0714rem;
      right: .7143rem;
      .btn-play
        width: 1.786rem;
        height: 1.786rem;
        margin-left: 1rem;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        background: url(../../assets/images/index/play_icon.png) no-repeat;
        background-size: 100%;
        &.btn-pause
          background: url(../../assets/images/index/pause_icon.png) no-repeat;
          background-size: 100%;
      .btn-next
        width: 1.786rem;
        height: 1.786rem;
        margin-left: 1rem;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        background: url(../../assets/images/index/next_icon.png) no-repeat;
        background-size: 100%;
      .ft-icon-download
        width: 1.786rem;
        height: 1.786rem;
        margin-left: 1rem;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        background: url(../../assets/images/index/download_icon.png) no-repeat;
        background-size: 100%;
</style>
